<template>
  <div>
    <h1>count:{{ count }}</h1>
    姓名:<input
      type="text"
      :value="username"
      @input="
        emit('update:username', ($event.target as HTMLInputElement).value)
      "
    />
    <button @click="emit('update:count', count + 1)">add</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Count',
});
</script>
<script lang="ts" setup>
const props = defineProps<{
  username: string;
  count: number;
}>();

const emit = defineEmits<{
  (event: 'update:username', value: string): void;
  (event: 'update:count', value: number): void;
}>();
</script>

<style lang="less" scoped></style>
